<template>
  <div class="container">
    <div style="padding:10px 0;">
      <div style="padding:15px;border:1px solid #eee;">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/matchmaker'}">红娘列表</el-breadcrumb-item>
          <el-breadcrumb-item>支付配置</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
    </div>
    <div class="list-group">
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="list-title"><span class="mast-icon" v-show="modelList.payment_name.request">*</span>商户名称:</div>
            </el-col>
            <el-col :span="9">
                <el-input v-model="modelList.payment_name.value" placeholder="支付商户名称"></el-input>
            </el-col>  
        </el-row>
    </div> 
    <div class="list-group">
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="list-title"><span class="mast-icon" v-show="modelList.payment_mchid.request">*</span>支付商户号:</div>
            </el-col>
            <el-col :span="9">
                <el-input v-model="modelList.payment_mchid.value" placeholder="支付商户号"></el-input>
            </el-col>  
        </el-row>
    </div> 
    <div class="list-group">
        <el-row :gutter="20">
            <el-col :span="3">
                <div class="list-title"><span class="mast-icon" v-show="modelList.payment_key.request">*</span>支付密钥:</div>
            </el-col>
            <el-col :span="9">
                <el-input v-model="modelList.payment_key.value" placeholder="支付密钥"></el-input>
            </el-col>  
        </el-row>
    </div>
    <div class="list-group"
         v-if="!judge"
         style="display:flex;flex-direction: row;justify-content: center;margin-top:40px;">
      <el-button size="medium" @click="cancel" style="margin-right:40px;">取 消</el-button>
      <el-button size="medium" type="primary" @click="preserve">确 定</el-button>
    </div>
  </div>
</template>

<script>
  import api from '@/api/index';
    import vueEditor from '@/components/views/commons/VueUeditorWrap';
  export default {
    name: 'positionAdd',
     components: {
        vueEditor
    },
    data: function () {
      return {
        mapseARCH:'',
        mapSearch:[],
        interestsList:[],
        showSearch:false,
        zzTypeist:[],
        tags:[],
        gridData:[],
        imgLoadPath: api.API_PATH + api.LOGIN_IMG,
        imgLoadPath: api.API_PATH + api.LOGIN_IMG,
        docLoadPath: api.IMG_PATH,
        pageName:'',
        createTime:'',
        ht_names:'',
        createPerson:'',
        modelList:{
          "payment_name":{value:'',request:true,name:'支付商户名称',placeholder:'请填写支付商户名称',type:'input'},
          "payment_mchid":{value:'',request:true,name:'支付商户号',placeholder:'请填写支付商户号',type:'input'},
          "payment_key":{value:'',request:true,name:'支付商户密钥',placeholder:'请填写支付商户密钥',type:'input'},
        },
        judge:false,
        titleText:'',
        id:'',
        type:'',
        title:'',
        roomLists:[],
        provinceList:[],
        companyList:[],
        followList:[],
        routerPath:'',
        name_zs:'',
        parentPage:0
      }
    },
    mounted () {
      this.id = this.$route.query.id;// 红娘ID
      this.initAjaxDetail()
    },
    methods: {
      interestsAdd(){
        this.interestsList.push({value:''})
      },
      interestsDel(index){
          this.interestsList.splice(index,1)
      },
      //保存
      preserve(){
        this.editAjaxMethod()
      },
      //取消
      cancel(){
        this.$router.push({path:'/matchmaker'})
      },
      //详细信息api
      initAjaxDetail(){
        const loading = this.$loading({text: '加载中...'});
        this.$http.post(api.ATCHMAKER_PAYMENT_DETAIL,{matchmaker_id:this.id})
                .then((res)=>{
                  console.log('res',res);
                  loading.close();
                  if(res.code == 1){
                    this.modelList.payment_name.value=res.data.payment_name;
                    this.modelList.payment_mchid.value=res.data.payment_mchid;
                    this.modelList.payment_key.value=res.data.payment_key;
                    let interests=[];
                  }else{
                    this.$message.error(res.msg);
                  }
                })
                .catch((err)=>{
                  console.log('err',err)
                  this.$message.error(err.msg);
                })
      },
      //编辑
      editAjaxMethod(){
        //验证
        let test=this.testMethod();
        if(!test.flag){
          this.$message.error(test.msg);
          return false;
        }else{
          test.data.id=this.id;
        } 
        const loading = this.$loading({text: '加载中...'});
        this.$http.post(api.ATCHMAKER_PAYMENT_EDIT,test.data)
                .then((res)=>{
                  loading.close();
                  if(res.code == 1){
                    this.$message.success('编辑成功');
                    setTimeout(()=>{
                      this.$router.back()
                    },1000)
                  }else{
                    this.$message.error(res.msg);
                  }
                })
                .catch((err)=>{
                  this.$message.error(err.msg);
                })
      },
      //验证方法
      testMethod(){
        let flag=true,msg='',data={};
        for(let i in this.modelList){
          if(this.modelList[i].request){
            if(!this.modelList[i].value || this.modelList[i].value == ''){
              flag=false;
              msg=this.modelList[i].placeholder;
              break;
            }
          }
        }
        if(flag){
          data={
            "payment_name":this.modelList.payment_name.value,
            "payment_mchid":this.modelList.payment_mchid.value, 
            "payment_key":this.modelList.payment_key.value,
          };
        }
        return {flag:flag,msg:msg,data:data}
      },
    }
  }
</script>


<style scoped>
  .list-title {
    height: 32px;
    line-height: 32px;
    font-size: 14px;
    color: #333;
  }
  .list-group {
    padding: 10px 0;
  }
  h2 {
    padding: 10px;
    font-size: 16px;
    font-weight: bold;
    position: relative;
  }
  h2:after {
    content: '';
    display: inline-block;
    width: 3px;
    height: 15px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    background: #409eff;
  }
  .map-group{
      position: relative;
  }
  .map-search{
      display: flex;
      align-items: center;
      position: absolute;
      top:10px;
      left:10px;
      padding:10px;
      width:400px;
      background: #fff;
      z-index: 300;
  }
  .map-search input{
      height: 40px;
      border:1px solid #eee;
      font-size:14px;
      color:#888;
      flex-grow: 1;
      outline: none;
  }
  .serarch-result{
      position: absolute;
      top:55px;
      left:0;
      right:0;
      box-shadow: 1px 1px 4px -3px #000;
      background-color:#fff;
      max-height: 300px;
  }
  .serarch-list{
      border-bottom:1px solid #eee;
  }
  .serarch-list:hover{
      cursor: pointer;
      background-color:#eee;
  }
  .serarch-rows{
      display: flex;
      padding:6px 10px;
      font-size:14px;
      color: #333;
      align-items: center;
  }
  .serarch-rows span:nth-child(1){
      margin-right:10px;
  }
</style>
